<template>
    <div>
        <div class="out-box filter-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="审批人">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
	            </el-form-item>
	                <el-form-item label="活动区域">
	                <el-select v-model="formInline.region" placeholder="活动区域">
	                    <el-option label="区域一" value="shanghai"></el-option>
	                    <el-option label="区域二" value="beijing"></el-option>
	                </el-select>
	            </el-form-item>
            	<el-button type="primary" class="fr" @click="linkInfo">查询</el-button>
        		<el-button class="fr" @click="exportList">重置</el-button>
            </el-form>
        </div>
        <div class="out-box">
        	<el-button type="primary" class="fr" @click="linkInfo">新增</el-button>
        	<el-button class="fr" @click="exportList">导出</el-button>
	        <el-table
	        	:stripe="true"
	        	class="scroll-table"
	            :data="tableData">
	            <el-table-column
	            	fixed
	            	width="120"
		            prop="client"
		            label="客户公司">
		        </el-table-column>
		        <el-table-column
		        	fixed
		        	width="120"
		            prop="teamNo"
		            label="团队号码">
		        </el-table-column>
		        <el-table-column
		            prop="location"
		            width="120"
		            label="地点">
		        </el-table-column>
		        <el-table-column
		            prop="startDate"
		            width="120"
		            label="活动开始时间"
		            :formatter="formatter">
		        </el-table-column>
		        <el-table-column
		            prop="endDate"
		            width="120"
		            label="活动结束时间"
		            :formatter="formatter">
		        </el-table-column>
		         <el-table-column
		            prop="invoice"
		            width="120"
		            label="发票">
		        </el-table-column>
		        
		        <el-table-column
		            prop="clientCharge"
		            width="120"
		            label="客户负责人">
		        </el-table-column>
		        <el-table-column
		            prop="invoiceAmount"
		            width="120"
		            label="发票金额">
		        </el-table-column>
		        <el-table-column
		            prop="VAT"
		            width="100"
		            label="增值税">
		        </el-table-column>
		        <el-table-column
		            prop="actualCost"
		            width="120"
		            label="实际费用">
		        </el-table-column>
		        <el-table-column
		            prop="cost"
		            width="120"
		            label="成本">
		        </el-table-column>
		        <el-table-column
		            prop="profit"
		            width="120"
		            label="利润额">
		        </el-table-column>
		        <el-table-column
		            prop="rate"
		            width="120"
		            label="利润率">
		        </el-table-column>
		        <el-table-column
		            prop="charge"
		            width="120"
		            label="操作负责人">
		        </el-table-column>		        
		        <el-table-column
		            prop="participant"
		            width="120"
		            label="出团人员">
		        </el-table-column>
		        <el-table-column
		            prop="PONo"
		            width="120"
		            label="po号">
		        </el-table-column>
		        <el-table-column
		            prop="reportDate"
		            width="120"
		            label="报账日期"
		            :formatter="formatter">
		        </el-table-column>
		        <el-table-column
		            prop="billingDate"
		            width="120"
		            label="开票日期"
		            :formatter="formatter">
		        </el-table-column>
		        <el-table-column
		            prop="arrival"
		            width="120"
		            label="到账日期"
		            :formatter="formatter">
		        </el-table-column>
		        <el-table-column
		            prop="remark"
		            width="300"
		            label="备注">
		        </el-table-column>
		        <el-table-column
			      fixed="right"
			      label="操作"
			      width="120">
			      <template slot-scope="scope">
			        <el-button
			          @click.native.prevent="editRow(scope)"
			          type="text"
			          size="small">
			          	编辑
			        </el-button>
			      </template>
			    </el-table-column>
	        </el-table>
        </div>
    </div>
</template>

<script>
import { activityService } from "../../service/activityService.js"
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        user: '',
        region: ''
        }
    };
  },
  mounted:function(){
  	this.getActivityList()
  },
  methods: {
	linkInfo() {
      this.$router.push({
	    path:'/home/activity',
      })
		
	},
	getActivityList(){
		activityService.getActivityList().then((res)=>{
			this.tableData = res.data
		})
	},
	editRow(row){
		this.$router.push({
	    path:'/home/activity/'+row.row.id,
      })
	},
	exportList(){
		activityService.exportActivityList().then((res)=>{
			console.log(res)
			this.downLoadFile(res,'财务报表')
		})
	},
	formatter(row, column, cellValue){
		return this.getdate(cellValue);
	}
  }
}
</script>


<style lang="css" scoped>
    .filter-box {
		margin-bottom: 24px;
    }
</style>